<template>
  <div class="ordercenter">
    <head_><h1>订单中心</h1></head_>
    <ul class="_ul">
      <li @click="toOrder($store.state.orderState[0].state)"><span>已支付订单</span><van-icon size=".4rem" name="arrow" /></li>
      <li @click="toOrder($store.state.orderState[1].state)"><span>未支付订单</span><van-icon size=".4rem" name="arrow" /></li>
      <li @click="toOrder($store.state.orderState[2].state)"><span>已失效订单</span><van-icon size=".4rem" name="arrow" /></li>
    </ul>
  </div>
</template>

<script>
  import head_ from "./header";
  export default {
    props: {},
    data() {
      return {};
    },
    methods: {
      toOrder(value){
        this.$router.push(`/wodedingdan1/${value}`)
      }
      /*toPaidOrder(){
        this.$router.push(`/wodedingdan1/`)
      },
      toUnpaidOrder(){
        this.$router.push(`/wodedingdan2`)
      },
      toExpiredOrder(){
        this.$router.push(`/wodedingdan3`)
      },*/
    },
    components: { head_ },
  };
</script>

<style scoped lang="less">
  .ordercenter {
    width: 100%;
    font-size: 0;
    ._ul {
      width: 100%;
      height: 3rem;
      display: flex;
      flex-direction: column;
      li {
        flex: 1;
        border-bottom: 0.01rem solid #e0e0e0;
        box-sizing: border-box;
        font-size: 0.27rem;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.24rem;
      }
    }
  }
</style>
